<template>
    <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/manageClass/allRoomsInfo' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考场信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchData" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="searchData.value" placeholder="请输入考场号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
       <el-form-item>
         <el-button-group>
          <el-button size="small" icon="el-icon-printer" type="success" @click="batchOutputExamNote(multipleSelection,'小纸条')">批量导出小纸条</el-button>
          <el-button size="small" icon="el-icon-printer" type="success" @click="batchOutputExamNote(multipleSelection,'签到表')">批量导出签到表</el-button>
         </el-button-group>
       </el-form-item>
       <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="creatExamRoom()">一键生成考场</el-button>
      </el-form-item>
    </el-form>
    <!-- table 表格区 -->
     <el-table :data="examRoomInfo" border :row-key="getRowKeys" @expand-change="expandChange" :expand-row-keys="expands" style="width: 100%; margin-top: 20px" v-loading= "loading"  @selection-change= "handleSelectionChange">
    <el-table-column type="expand">
      <template slot-scope="props">
       <el-table size="small" :data="props.row.studentList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column
          prop="sRoomNo"
          label="座位号"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="sCardNo"
          label="身份证号"
         >
        </el-table-column>
        <el-table-column
          prop="sCertNo"
          label="准考证号"
          >
        </el-table-column>
        <el-table-column
          prop="sName"
          label="姓名"
          >
        </el-table-column>
         <el-table-column
          prop="sSex"
          label="性别"
          >
        </el-table-column>
         <el-table-column
          prop="sSchool"
          label="所属学校"
          >
        </el-table-column>
      </el-table>
      </template>
    </el-table-column>
     <el-table-column
      label="教室编号"
      prop="rid"
      align="center">
     </el-table-column>
      <el-table-column
      label="教室名称"
      prop="erName"
      align="center">
     </el-table-column>
     <el-table-column
       label="考试编号"
       prop="eno"
       align="center">
     </el-table-column>
     <el-table-column
       label="考场号"
       prop="erNo"
       align="center">
     </el-table-column>
     <el-table-column
       label="考试专业"
       prop="course"
       align="center">
     </el-table-column>
     <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
         <el-button-group>
          <el-button size="mini" icon="el-icon-printer" type="primary" @click="outputExamNote(scope.$index, scope.row,'小纸条')">导出小纸条</el-button>
          <el-button size="mini" icon="el-icon-printer" type="primary" @click="outputExamNote(scope.$index, scope.row,'签到表')">导出签到表</el-button>
         </el-button-group>
        </template>
      </el-table-column>
  </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import { getAllExamRoom, searchExamRoom, CreatExamRoom } from '../../../../api/userOpe'
import Pagination from '../../../../components/Pagination'
import outPutWordAndPic from '@/util/exportWordAndPic'
export default {
  mixins: [outPutWordAndPic],
  data () {
    return {
      loading: true, // 是显示加载
      stuFormVisible: false, // 控制编辑页面显示与隐藏
      title: '修改考生信息',

      // 列表展开参数
      expands: [],
      // 表单数据发送
      formInline: {
        pageNum: 1,
        pageSize: 10
      },
      // 要搜索的值
      searchData: {
        value: ''
      },
      // 储存 多选框选中数据
      multipleSelection: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 储存所有考场信息
      examRoomInfo: []
    }
  },
  components: {
    Pagination
  },
  created () {
    this.getData(this.formInline)
  },
  methods: {
    // 人性化处理 table 展开行默认展开行
    getRowKeys (row) {
      return row.erid
    },
    expandChange (row) {
      // console.log(row.cid, this.expands[0])
      if (row.erid === this.expands[0]) { // 判断是不是本身，如果点击的还是本身，则关闭，人性化
        this.expands = []
      } else {
        if (row.studentList) {
          this.expands = [] // 每次点击一个框，出自己以外其他的都不展示， 如果需要方便两个专业考试的对比那就删除本行
          if (row) {
            this.expands.push(row.erid)// 每次push进去的是每行的ID
          }
        } else {
          this.expands = []// 默认不展开
        }
      }
    },
    getData (forms) {
      getAllExamRoom(forms).then(res => {
        console.log(res.message === 'OK')
        if (res.message !== 'OK') {
          this.$message.error('获取考场信息失败，请重试！')
          this.loading = false
        } else {
          this.$message.success('获取考场信息成功！')
          this.examRoomInfo = res.data.examRoomInfos.list
          // console.log(this.examRoomInfo)
          this.examRoomInfo.forEach(item => {
            item.studentList.forEach(itemSon => {
              itemSon.sSex = (itemSon.sSex === 1) ? '男' : '女'
            })
          })
          this.pageparm.total = res.data.examRoomInfos.total
          this.loading = false
        }
      }).catch((e) => {
        this.$message.warning('请求数据异常，请刷新页面重试！')
        this.loading = false
      })
    },
    // 搜索考生
    search () {
      // console.log(this.examRoomInfo)
      if (this.searchData.value.trim() !== '') {
        searchExamRoom(this.searchData).then(res => { // 这里特例，交给后端 首尾空格处理]
          // console.log(res)
          this.examRoomInfo = res.data.examRoomInfoList.list
        })
      } else {
        this.getData(this.formInline)
      }
    },
    // 导出考场小纸条
    outputExamNote (index, row, val) {
      // console.log(row)
      if (val === '小纸条') this.exportWordAndPic(row.studentList, 'demo2')
      else this.exportWordAndPic(row.studentList, 'demo1')
    },
    // 选择框触发事件
    handleSelectionChange (val) {
      this.multipleSelection = val // 只要考场号
      // console.log(this.multipleSelection)
    },
    // 批量导出表事件
    batchOutputExamNote (tableLists, val) {
      if (val === '小纸条') {
        for (let i = 0; i < tableLists.length; i++) {
          this.exportWordAndPic(tableLists[i].studentList, 'demo2')
        }
      } else {
        for (let j = 0; j < tableLists.length; j++) {
          this.exportWordAndPic(tableLists[j].studentList, 'demo1')
        }
      }
    },

    // 考场生成
    creatExamRoom () {
      CreatExamRoom({ eno: '1001' }).then(res => {
        console.log(res.message)
        if (res.message !== 'OK') {
          this.$message.error('考场生成失败！请重试！')
        } else {
          this.$message.success('考场生成成功,请勿重复点击生成！')
          this.getData(this.formInline)
        }
      }).catch((e) => {
        this.$message.warning('请求异常，请重试！')
      })
    },
    // 分页插件事件
    callFather (parm) {
      // console.log(parm.currentPage, parm.pageSize)
      this.formInline.pageNum = parm.currentPage
      this.formInline.pageSize = parm.pageSize
      // console.log(this.formInline)
      this.getData(this.formInline)
    },
    closeDialog () {
      this.stuFormVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.user-search
  margin-top: 20px
.el-table, .el-table__expanded-cell
  opacity : 0.8
</style>
